import React, { useEffect, useState, Key } from 'react'
// 按钮和表单组件
import { Button, Table, Form, Input, Card, message, Tooltip } from 'antd';
// 字体图标
import { SearchOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons"

import { useNavigate } from 'react-router-dom';

//引入api中请求的方法
import { getHosSetListRequest, deleteHosSetFromIdRequest, batchDeleteHosRequest } from '@/api/hospital/hospitalSet';
// 引入axios请求 返回数据类型
import type { getHosSetListRecordsType, getHosSetListItemsType } from '@/api/hospital/model/hospitalSetTypes'


import style from "./index.module.css"


interface searchHosFinishPraType {
    hosname?: string,
    hoscode?: string
}

export default function HospitalSet() {
    // 使用编程式路由导航
    const navigate = useNavigate()

    //data是表格的数据 每一个对象的中的key和columns中的dataIndex一一对象展示数据
    const [tableData, setTableData] = useState<getHosSetListRecordsType>([])
    //定义current(当前页码)的state[useState的泛型根据我们传入的参数推论出来了]
    const [current, setCurrent] = useState(1)
    // 定义total（总个数）的state
    const [total, setTotal] = useState(0)
    //定义pageSize(每页的数量)的state
    const [pageSize, setPageSize] = useState(3)
    //定义isLoading(table是否加载中)
    const [isLoading, setIsLoading] = useState(false)
    //参数是收集当前表单的值 组成的对象
    const [fieldValue, setFieldValue] = useState<searchHosFinishPraType>({})
    // 设置一个state专门处理删除事件更新页面
    const [rerender, setReRender] = useState(true)
    // 定义一个控制批量删除按钮的状态
    const [isSelect, setIsSelecte] = useState(true)
    // 定义一个保存批量选中ids的状态
    const [bacthSelectIds, setBatchSelectIds] = useState<Key[]>([]);
    //当组件加载的时候,开始请求分页列表的数据
    //注意:异步函数不能作为useEffect的参数,因为useEffect可能会书写return一个函数起到清理作用,如果是异步函数,则return就是异步的了

    useEffect(() => {
        //在请求开始之前,设置isLoading为true
        setIsLoading(true)
        const getHosSetList = async () => {
            const result = await getHosSetListRequest({
                page: current,
                limit: pageSize,
                ...fieldValue
            })
            // console.log(result, "result");
            // 1.把得到的结果中records数据(医院列表的数组)设置给state
            setTableData(result.records)
            //  2.把得到的结果中 数据的总长度设置给state(返回的数据中带有数据长度)
            setTotal(result.total)
            //请求完成后要把isLoading修改为false 
            setIsLoading(false)
        }
        getHosSetList();
    }, [current, pageSize, fieldValue, rerender])

    //colums是控制表格的字段有哪些,title属性就是当前的字段名称,dataIndex就是用来和将来的数据进行一一对应的

    const columns = [
        {
            title: '序号',
            width: 70,
            dataIndex: 'index',
            //render函数的第三个参数是当前的数据的下标
            render(_: any, __: any, index: number) {
                return index + 1
            }
        },
        {
            title: '医院名称',
            dataIndex: 'hosname',

        },
        {
            title: '医院编号',
            dataIndex: 'hoscode',
        },
        {
            title: 'api基础路径',
            dataIndex: 'apiUrl',
        },
        {
            title: '签名',
            dataIndex: 'signKey',
        },
        {
            title: '联系人姓名',
            dataIndex: 'contactsName',
        },
        {
            title: '联系人手机',
            dataIndex: 'contactsPhone',
        },
        {
            title: '操作',
            dataIndex: 'do',
            width: 120,
            // 右侧固定
            fixed: "right" as "right",
            // 右侧编辑和删除按钮
            // 第二个参数是第54行返回的数据中的records  
            render(_: any, data: getHosSetListItemsType) {
                const { id } = data
                return (
                    <div>
                        <Tooltip title="修改医院">
                            <Button
                                type='primary'
                                icon={<EditOutlined />}
                                className={style.mr}
                                onClick={() => { navigate(`/syt/hospital/updatehosset/${id}`) }}
                            ></Button>
                        </Tooltip>
                        <Tooltip title="删除医院">
                            <Button type='primary'
                                danger icon={<DeleteOutlined />}
                                onClick={deleteHosHandle(id)}
                            >
                            </Button>
                        </Tooltip>

                    </div >
                )
            }
        },
    ];

    // 事件回调函数
    //1.点击页码以后的事件回调函数
    const pageChangeHandle = (current: number, pageSize: number) => {
        //参数1page:当前点击的页码  参数2 pageSize:每页条数
        //点击以后给state设置page和pageSize的值
        setCurrent(current)
        setPageSize(pageSize)
    }
    // 2.点击查询提交表单的事件回调函数
    //                                参数是收集当前表单的值 组成的对象
    const searchHosFinishHandle = (FieldValue: searchHosFinishPraType) => {

        setFieldValue(FieldValue)
    }
    // 3添加医院事件回调
    const addHosHandle = () => {
        // 编程式路由导航
        navigate("/syt/hospital/addorupdatehosset")
    }
    // 4删除医院事件回调
    const deleteHosHandle = (id: number) => {
        return async () => {
            await deleteHosSetFromIdRequest(id)
            //重新渲染
            setReRender(!rerender)
            message.success("删除医院成功")
        }
    }

    // 5批量删除事件回调函数
    const batchDeleteHandle = async () => {
        // 发送批量删除请求
        await batchDeleteHosRequest(bacthSelectIds)
        message.success("批量删除成功")
        // 重新渲染
        setReRender(!rerender)
        // 把批量删除按钮恢复
        setIsSelecte(true)
    }

    return (
        //   Form.Item 单个表单项组件，name 表单项名称，也是将来收集的表单数据名称

        //colums是控制表格的字段有哪些,title属性就是当前的字段名称,dataIndex就是用来和将来的数据进行一一对应的
        <div className={style.outer}>
            <Card>
                <Form
                    name="basic"
                    wrapperCol={{ span: 30 }}
                    layout='inline'
                    // 提交表单且数据验证成功后回调事件
                    onFinish={searchHosFinishHandle}
                >
                    <Form.Item
                        name="hosname"
                    >
                        <Input placeholder="医院名称" />
                    </Form.Item>

                    <Form.Item
                        name="hoscode"
                    >
                        {/* placeholder 背景提词 */}
                        <Input placeholder='医院编号' />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        {/*  htmlType表单自带属性 submit：提交  reset：重置 */}
                        <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                            查询
                        </Button>
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        {/* type="primary"主体颜色   type="default" 禁用表单 */}
                        <Button type="default" htmlType="reset">
                            清空
                        </Button>
                    </Form.Item>
                </Form>

                <div className={style.mt}>
                    <Button type='primary' onClick={addHosHandle} className={style.mr}>添加</Button>
                    <Button type="primary" danger disabled={isSelect} onClick={batchDeleteHandle}>批量删除</Button>
                </div>
                <Table className={style.mt}
                    // colums是控制表格的字段有哪些
                    columns={columns}
                    //   请求回来的数据和 columns-dataIndex进行一一对应的
                    dataSource={tableData}
                    //  进度条
                    scroll={{ x: 1500 }}
                    //  表格边框
                    bordered
                    //在table中 要求dataSource中有key属性,但是如果真的没有key 则可以使用rowKey属性指定dataSource中的一个属性作为Key
                    rowKey="id"
                    // 数据加载转圈状态
                    loading={isLoading}
                    // 表格可选中状态
                    rowSelection={{
                        onChange(ids: Key[]) {
                            //设置控制批量删除按钮state的状态
                            setIsSelecte(!ids.length)
                            //当选项框被修改的时候,实时的修改保存所有被选中id的状态
                            setBatchSelectIds(ids);
                        }
                    }}
                    //  页码配置
                    pagination={{
                        //页码的配置：当前页码
                        current,
                        //总数据的数量
                        total,
                        //每页条数
                        pageSize,
                        //展示更改每页条数的选项(默认total大于50条的时候开启)
                        pageSizeOptions: [3, 8, 15],
                        //是否直接开启更新每页条数的选项
                        showSizeChanger: true,
                        // 设置分页总数据
                        showTotal(total) {
                            return `总共有${total}条数据`
                        },
                        // 页码或每页条数改变触发的事件回调
                        onChange: pageChangeHandle
                    }}
                />
            </Card>
        </div>

    )
}
